Figma MCP

Created By

1yhy10 months ago

Overview

what is Figma MCP?

Figma MCP is a server that integrates Figma design files with AI coding tools like Cursor, Windsurf, and Cline, allowing for seamless access to design data for generating accurate code.

how to use Figma MCP?

To use Figma MCP, clone the repository, install dependencies, set up your Figma API access token, and run the server using the provided commands. You can also connect it to AI tools by configuring their settings to point to the MCP server.

key features of Figma MCP?

Converts Figma design data into a format easily understood by AI models.
Supports retrieval of layout and style information from Figma files, boards, or components.
Allows downloading of images and icons from Figma.
Reduces context provided to models, improving AI response accuracy and relevance.

use cases of Figma MCP?

Generating code from Figma designs for web applications.
Enhancing AI tools with accurate design data for better output.
Streamlining the design-to-code workflow in development projects.

FAQ from Figma MCP?

What is the main difference from the original version?

The main difference is the optimization of data structure and conversion logic.

How do I install Figma MCP?

You can install it globally via npm or from a local package after building it.

Can I use Figma MCP with any AI tool?

Yes, it can be integrated with various AI tools that support MCP.

Try in Playground

Server Config

{
  "mcpServers": {
    "Figma MCP": {
      "command": "npx",
      "args": [
        "figma-mcp",
        "--figma-api-key=<your-figma-api-key>",
        "--stdio"
      ]
    }
  }
}

Recommend Servers

TraeBuild with Free GPT-4.1 & Claude 3.7. Fully MCP-Ready.

Zhipu Web SearchZhipu Web Search MCP Server is a search engine specifically designed for large models. It integrates four search engines, allowing users to flexibly compare and switch between them. Building upon the web crawling and ranking capabilities of traditional search engines, it enhances intent recognition capabilities, returning results more suitable for large model processing (such as webpage titles, URLs, summaries, site names, site icons, etc.). This helps AI applications achieve "dynamic knowledge acquisition" and "precise scenario adaptation" capabilities.

ChatWiseThe second fastest AI chatbot™

BlenderBlenderMCP connects Blender to Claude AI through the Model Context Protocol (MCP), allowing Claude to directly interact with and control Blender. This integration enables prompt assisted 3D modeling, scene creation, and manipulation.

Playwright McpPlaywright MCP server

Visual Studio Code - Open Source ("Code - OSS")Visual Studio Code

CursorThe AI Code Editor

Tavily Mcp

AiimagemultistyleA Model Context Protocol (MCP) server for image generation and manipulation using fal.ai's Stable Diffusion model.

MCP AdvisorMCP Advisor & Installation - Use the right MCP server for your needs

Amap Maps高德地图官方 MCP Server